06. Ordering Elements Demo

Ordering Elements with Flexbox Example Prep

Ordering Elements Demo

flex-direction:row; will lay elements out from left to right. But flex-direction:row-reverse will flip that order and display elements from right to left.

ND001 C01 L03 06 Ordering Elements With Flexbox V3

Ordering Elements with Flexbox Example Summary

The row and columns settings for flex elements can be reversed by appending -reverse to either property value.

Ordering Elements with Flexbox Problem Set

Which of the following is NOT a valid way to order elements inside a grid with Flexbox?
SOLUTION:
  • Naming the elements in numeric order

Workspace

This section contains either a workspace (it can be a Jupyter Notebook workspace or an online code editor work space, etc.) and it cannot be automatically downloaded to be generated here. Please access the classroom with your account and manually download the workspace to your local machine. Note that for some courses, Udacity upload the workspace files onto https://github.com/udacity, so you may be able to download them there.

Workspace Information:

  • Default file path:
  • Workspace type: html-live
  • Opened files (when workspace is loaded): n/a

Ordering Elements with Flexbox Summary

Summary

The order of flex items is by default determined by the order they appear in your code. You can explicitly change this order using either -reverse or with the CSS property order.

Ordering Elements with Flexbox Further Research

Further Research

For more information on ordering flex items, you can see this section of the flexbox MDN article.

Next Concept